<template>
    <el-form :label-position="labelPosition" :model="ruleForm" status-icon :rules="rules" :ref="formName" :label-width="labelWidth" class="demo-ruleForm" :size="formSize">
        <el-form-item :label="item.label" :prop="item.prop" v-for="(item,index) in formConfig" :key="item.prop + index">
            <el-input v-if="item.type === 'input'"
                @change="itemChange"
                v-model="ruleForm[item.prop]"
                :placeholder="item.placeholder">
            </el-input>
            <el-date-picker
                @change="itemChange"
                style="width:100%;"
                v-if="item.type === 'date'"
                v-model="ruleForm[item.prop]"
                type="date"
                :placeholder="item.placeholder">
            </el-date-picker>
            <el-select
                @change="itemChange"
                v-if="item.type === 'select'"
                style="width:100%;"
                v-model="ruleForm[item.prop]"
                :placeholder="item.placeholder">
                <el-option v-for="(sitem) in item.options" :key="sitem.value"
                    :label="sitem.label"
                    :value="sitem.value">
                </el-option>
            </el-select>
        </el-form-item>
    </el-form>
</template>

<script>
    import { creadFormData } from '../utils/MyForm.js'
    
    export default {
        name: 'MyForm',
        props: {
            formConfig: {
                type: Array,
                default: () => {}
            },
            labelPosition: {
                type: String,
                default: 'top'
            },
            labelWidth: {
                type: String,
                default: '100px'
            },
            formSize: {
                type: String,
                default: 'small'
            }
            
        },
        data () {
            return {
                ruleForm: null,
                rules: null,
                formName: '',
                formData: null
            }
        },
        created () {
            const { rules, form } = creadFormData(this.formConfig)
            this.ruleForm = form
            this.formData = JSON.parse(JSON.stringify(form))
            this.rules = rules
            this.formName = 'myform' + Math.floor(Math.random() * 1000000)
        },
        methods: {
            itemChange () {
                this.formData = JSON.parse(JSON.stringify(this.ruleForm))
                for (let i = 0; i < this.formConfig.length; i++) {
                    // 格式化日期格式
                    if (this.formConfig[i].type === 'date' && this.ruleForm[this.formConfig[i].prop] !== '') {
                        this.formData[this.formConfig[i].prop] = this.$moment(this.formData[this.formConfig[i].prop]).format('YYYY-MM-DD')
                    }
                }
            },
            submitForm (fun) {
                this.$refs[this.formName].validate((valid) => {
                    if (valid) {
                        console.log('submit!!')
                        fun({ formData: this.formData })
                        return true
                    } else {
                        console.log('error submit!!')
                        fun({ formData: null })
                        return false
                    }
                })
            },
            resetForm () {
                this.$refs[this.formName].resetFields()
            }
        }
    }
</script>

<style scoped lang="scss">

</style>
